From: Carlos Garnacho <carlosg@gnome.org>
Date: Tue, 23 Feb 2021 16:44:23 +0000 (+0100)
Subject: appDisplay: Slide page hints along page switching
X-Git-Tag: archive/raspbian/50.5-1+rpi1~1^2~616^2^2~203
X-Git-Url: https://dgit.raspbian.org/%22http://www.example.com/cgi/%22/%22http:/www.example.com/cgi/%22?a=commitdiff_plain;h=ec223f31d98bd6e6026ab3ef7f3ad5a7e5ef0ca2;p=gnome-shell.git

appDisplay: Slide page hints along page switching

When clicking on the page hints, the hint rectangles being visible
in place and not moving together with the page is a bit too
distracting.

Since the page hints are not part of the iconGrid hierarchy and
we have just 2 general ones for prev/next page (i.e. no page
associated), do this sliding via some smoke and mirrors: We don't
slide the page hints, but a parent container for both of them, and
we also control opacity so that the container is fully transparent
mid-page. At the point it is transparent, the container can be
snapped to the other side of the page, and faded back in as it
slides together with it, so it always looks like it goes away and
comes from the right sides.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1630>
---

diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index c0517a5f2..94d1ef24e 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -175,7 +175,22 @@ var BaseAppView = GObject.registerClass({
         this._adjustment = scroll.adjustment;
         this._adjustment.connect('notify::value', adj => {
             this._updateFade();
-            this._pageIndicators.setCurrentPosition(adj.value / adj.page_size);
+            const value = adj.value / adj.page_size;
+            this._pageIndicators.setCurrentPosition(value);
+
+            const distanceToPage = Math.abs(Math.round(value) - value);
+            if (distanceToPage < 0.001) {
+                this._hintContainer.opacity = 255;
+                this._hintContainer.translationX = 0;
+            } else {
+                this._hintContainer.remove_transition('opacity');
+                let opacity = Math.clamp(
+                    255 * (1 - (distanceToPage * 2)),
+                    0, 255);
+
+                this._hintContainer.translationX = (Math.round(value) - value) * adj.page_size;
+                this._hintContainer.opacity = opacity;
+            }
         });
 
         // Page Indicators
@@ -239,13 +254,20 @@ var BaseAppView = GObject.registerClass({
             x_align: Clutter.ActorAlign.START,
         });
 
+        this._hintContainer = new St.Widget({
+            layout_manager: new Clutter.BinLayout(),
+            x_expand: true,
+            y_expand: true,
+        });
+        this._hintContainer.add_child(this._prevPageIndicator);
+        this._hintContainer.add_child(this._nextPageIndicator);
+
         const scrollContainer = new St.Widget({
             layout_manager: new Clutter.BinLayout(),
             clip_to_allocation: true,
             y_expand: true,
         });
-        scrollContainer.add_child(this._prevPageIndicator);
-        scrollContainer.add_child(this._nextPageIndicator);
+        scrollContainer.add_child(this._hintContainer);
         scrollContainer.add_child(this._scrollView);
         scrollContainer.add_child(this._nextPageArrow);
         scrollContainer.add_child(this._prevPageArrow);